<template>
  <div class="cangjie-oj-container">
    <h1>仓颉OJ 在线评测</h1>
    <p>在这里你可以使用仓颉语言进行在线编程和题目评测。</p>
    <div class="oj-section">
      <div class="oj-problem">
        <label for="problem-select">选择题目：</label>
        <select id="problem-select" v-model="selectedProblemId">
          <option v-for="problem in problems" :key="problem.id" :value="problem.id">
            {{ problem.title }}
          </option>
        </select>
        <div class="problem-desc" v-if="currentProblem">
          <h3>{{ currentProblem.title }}</h3>
          <p>{{ currentProblem.description }}</p>
        </div>
      </div>
      <div class="oj-editor">
        <label for="code-editor">代码编辑器：</label>
        <textarea
          id="code-editor"
          v-model="userCode"
          rows="10"
          placeholder="在这里输入你的仓颉代码"
        ></textarea>
      </div>
      <button class="submit-btn" @click="handleSubmit">提交评测</button>
      <div class="oj-result" v-if="resultMsg">
        <strong>评测结果：</strong>
        <span :class="resultClass">{{ resultMsg }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CangjieOJ',
  data() {
    return {
      problems: [
        {
          id: 1,
          title: '输出Hello, Cangjie!',
          description: '请用仓颉语言输出：Hello, Cangjie!',
          answer: 'print("Hello, Cangjie!")'
        },
        {
          id: 2,
          title: '加法运算',
          description: '输入两个整数，输出它们的和。',
          answer: 'a, b = input().split(); print(int(a)+int(b))'
        },
        {
          id: 3,
          title: '字符串反转',
          description: '输入一个字符串，输出其反转结果。',
          answer: 's = input(); print(s[::-1])'
        },
        {
          id: 4,
          title: '判断奇偶',
          description: '输入一个整数，若为偶数输出 even，否则输出 odd。',
          answer: 'n = int(input()); print("even" if n%2==0 else "odd")'
        },
        {
          id: 5,
          title: '求和循环',
          description: '输入一个正整数n，输出1到n的和。',
          answer: 'n = int(input()); print(sum(range(1, n+1)))'
        },
        {
          id: 6,
          title: '最大值查找',
          description: '输入一行用空格分隔的整数，输出其中的最大值。',
          answer: 'nums = list(map(int, input().split())); print(max(nums))'
        },
        {
          id: 7,
          title: '统计元音字母',
          description: '输入一个字符串，输出其中元音字母(aeiou)的个数。',
          answer: 's = input(); print(sum(1 for c in s if c in "aeiouAEIOU"))'
        }
      ],
      selectedProblemId: 1,
      userCode: '',
      resultMsg: '',
      resultClass: ''
    }
  },
  computed: {
    currentProblem() {
      return this.problems.find(p => p.id === this.selectedProblemId);
    }
  },
  methods: {
    handleSubmit() {
      // 简单模拟评测：只判断代码是否和答案完全一致
      if (this.userCode.trim() === this.currentProblem.answer.trim()) {
        this.resultMsg = '答案正确！';
        this.resultClass = 'success';
      } else {
        this.resultMsg = '答案错误，请检查你的代码。';
        this.resultClass = 'error';
      }
    }
  }
}
</script>

<style scoped>
.cangjie-oj-container {
  max-width: 900px;
  margin: 40px auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 40px 32px;
  text-align: center;
}
.cangjie-oj-container h1 {
  color: #6d28d2;
  font-size: 2.2rem;
  margin-bottom: 18px;
}
.oj-section {
  margin-top: 32px;
  text-align: left;
}
.oj-problem {
  margin-bottom: 24px;
}
.problem-desc {
  margin-top: 10px;
  background: #f3f4f6;
  border-radius: 6px;
  padding: 12px;
}
.oj-editor {
  margin-bottom: 18px;
}
#code-editor {
  width: 100%;
  font-family: 'Fira Mono', 'Consolas', monospace;
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  padding: 10px;
  min-height: 120px;
  resize: vertical;
}
.submit-btn {
  background: #6d28d2;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 32px;
  font-size: 1rem;
  cursor: pointer;
  margin-bottom: 16px;
  transition: background 0.2s;
}
.submit-btn:hover {
  background: #5b21b6;
}
.oj-result {
  margin-top: 12px;
  font-size: 1.1rem;
}
.success {
  color: #22c55e;
}
.error {
  color: #ef4444;
}
</style> 